<template>
  <div>
    <van-notice-bar
      left-icon="volume-o"
      text="疫情地区不定时更新 ，部分地区可能会受到影响，具体以实际发出为准"
    />

    <div class="box">
      <div class="big">
        <img :src="newimg" />
        <p>{{ newarr }}</p>
        <div>
          <span>￥129.9</span>
          <span>马上抢</span>
        </div>
      </div>
      <div class="smallbox">
        <div class="small" v-for="(v, i) in arra" :key="i">
          <img :src="v" />
          <p>{{ newarr }}</p>
          <div>
            <span>￥129.9</span>
            <span>马上抢</span>
          </div>
        </div>      
      </div>
    </div>
  </div>
</template>

<script>
import getlink from "@/apis/getapi.js";
export default {
   data() {
    return {
      arr: "",
    };
  },
  computed: {
     arra() {
      return this.arr.slice(0, 6);
    },
    newarr() {
      return this.$store.state.arr[0].name;
    },
    newimg() {
      return this.$store.state.arr[0].img;
     
    },
  },

  created() {
    this.$store.dispatch("getaxios", { url: "/data/list/lists" });
  },
  mounted(){
   
       getlink("/data/list/lists").then((ok) => {
      console.log(ok.data.data);
      this.arr =ok.data.swiper;
    });
  }
};
</script>

<style scoped>
.box {
  padding-bottom: 1rem;
}
.big {
  width: 320px;
  margin: 0.1rem auto;
  border: 2px solid rgba(180, 179, 179, 0.637);
}
.big img {
  width: 320px;
  height: 320px;
}
.big p,
.small p {
  height: 0.4rem;
  line-height: 0.2rem;
}
.big div,
.small div {
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.big div span:nth-child(1),
.small div span:nth-child(1) {
  color: red;
  font-size: 0.16rem;
}
.big div span:nth-child(2),
.small div span:nth-child(2) {
  color: white;
  background-color: red;
  border-radius: 0.1rem;
  width: 0.5rem;
  height: 0.2rem;
  line-height: 0.2rem;
  text-align: center;
}
.smallbox {
  width: 3.3rem;
  display: flex;
  flex-wrap: wrap;
 margin: 0 auto;
}
.small {
  width: 1.6rem;
  height: 2.6rem;
  border: 2px solid rgba(180, 179, 179, 0.486);
}
.small img {
  width: 1.6rem;
  height: 1.6rem;
}
.smallbox p {
  white-space: normal;
}
</style>